<script setup lang="ts">
import ApexCharts from "apexcharts";
import { onMounted, reactive, useAttrs } from "vue";
import { warnSipTop, warnThreaTop } from "@/api/modules/home/index";

const pageData = reactive({
  series: [
    {
      data: []
    }
  ],
  chartOptions: {
    chart: {
      type: "bar",
      height: 380,
      toolbar: {
        show: false,
      },
    },
    plotOptions: {
      bar: {
        barHeight: "30px",
        distributed: true,
        horizontal: true,
        dataLabels: {
          position: "bottom"
        }
      }
    },
    colors: ["rgb(48, 50, 63)", "#546E7A", "#d4526e", "#13d8aa", "#A5978B", "#2b908f", "#f9a3a4", "#90ee7e", "#f48024", "#69d2e7"],
    dataLabels: {
      enabled: true,
      textAnchor: "start",
      style: {
        colors: ["#fff"]
      },
      formatter: function (val, opt) {
        return pageData.chartOptions.xaxis.categories[opt.dataPointIndex] + ":  " + val;
      },
      offsetX: 0,
      dropShadow: {
        enabled: true
      }
    },
    stroke: {
      width: 1,
      colors: ["#fff"]
    },
    xaxis: {
      categories: [],
    },
    yaxis: {
      labels: {
        show: false
      },
    },
    title: {
      text: "",
      align: "center",
      floating: true
    },
    subtitle: {
      text: "",
      align: "center"
    },
    legend: {
      show: false, // 显示图例
      position: "top" // 图例位置
    },
    tooltip: {
      theme: "dark",
      x: {
        show: false
      },
      y: {
        title: {
          formatter: function () {
            return "";
          }
        }
      }
    }
  }
});
onMounted(async () => {
  const res = await warnSipTop();
  // const res = await warnThreaTop();
  console.log("res.title===========",res)
  pageData.series = [
    {
      data: res.data
    }
  ];
  pageData.chartOptions.xaxis.categories = res.title;
});
</script>
<template>
  <div>
    <h3 style="margin: 0px">攻击源</h3>
    <div style="height: 350px">
      <apexchart
        width="100%"
        v-if="pageData.series?.length"
        height="350px"
        type="bar"
        :options="pageData.chartOptions"
        :series="pageData.series"
      ></apexchart>
    </div>
  </div>
</template>

<style scoped></style>
